<template>
    <div class="user-avator-dropdown">
        <Dropdown @on-click="handleClick">
            <!-- <Avatar :src="userAvator"/> -->
            <a href="javascript:void(0)">
                {{ username }}
                <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
                <DropdownItem
                    name="company"
                    v-if="showCompany"
                >公司信息</DropdownItem>
                <DropdownItem name="password">修改密码</DropdownItem>
                <DropdownItem name="logout">退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script>
import './user.less'
import { mapState, mapActions } from 'vuex'
import ModifyPwd from '@/components/modify-password'

export default {
    name: 'User',
    props: {
        userAvator: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            routesList: this.$router.options.routes
        }
    },
    computed: {
        ...mapState({
            username: state => state.user.userName,
            showCompany: state => state.user.roleType === '4'
        })
    },
    methods: {
        ...mapActions(['handleLogOut']),
        handleClick (name) {
            switch (name) {
                case 'logout':
                    this.$Modal.confirm({
                        title: '退出登录',
                        content: '确认退出系统？',
                        onOk: () => {
                            const { href } = this.$router.resolve({ name: 'login' })
                            this.handleLogOut().then(() => {
                                window.location.href = href
                            })
                        }
                    })
                    break
                case 'company':
                    this.$router.push({
                        name: 'studenCompany'
                    })
                    break
                case 'password':
                    ModifyPwd.open()
                    break
            }
        }
    }
}
</script>
<style scoped>
.user-avator-dropdown a {
    color: #fff;
}
</style>
